/*首先是页面初始化工作。*/

*{

  /*这里也是为了清除ul和li的padding*/
  padding: 0;


  margin: 0;

  /* 取消ul和li前面的小圆点。 */
  list-style: none;

  /* CSS文字修饰为无;一般用于设置清除超链接（a标签）的默认下划线*/
  text-decoration: none;

}




html,body{

  width: 100%;

  height: 100%;

  /*默认字体颜色*/
  color: #3c3c3c;

    /*横向超出内容消失(overflow-x)，这样横向滚动条会消失。
      竖向超出内容消失(overflow-y)，这样竖向滚动条会消失。
      两边都消失，则：overflow:hidden;
      */
      overflow-x:hidden; 

      background-color: #f4f4f4;

    }




    .wrapper{

    /* 直接给wrapper设置高度为100%的话，它会根据你页面中的内容
    撑开容器，而不是占满整个屏幕,所以要设置它选中整个浏览器的高度
    ，要基于它的父级（就是body），
    */
    height: 100%;
    width: 100%;



  }


  /*要从外到内的写，不要乱，不然很难排查错误。*/



/*当内容区超出浏览器屏幕宽度或者高度的时候，
会出现横向和竖向的滚动条。*/



/*导航条加广告区域。*/
.wrapper  .top-nav-wrap{


 width: 100%;
 height: 35px;

 background-color: #f4f4f4;

 /*border: 1px solid black;*/


}

/*上面导航条部分*/
.wrapper  .top-nav-wrap .top-nav{

  width: 1190px; 

  height: 35px;

  /*border:1px solid black;*/

  /*导航条部分居中处理：上下两边为零，左右自适应*/
  margin:0 auto;

}

/*利用ul的浮动左右两边分布。*/
/*导航栏左边部分，要设置向左边浮动，才会在左边。*/
.wrapper  .top-nav-wrap .top-nav .top-nav-left{

  float: left;


}


/*利用ul的浮动左右两边分布。*/
/*导航栏右边部分，要设置向右边浮动，才会在右边。*/
.wrapper  .top-nav-wrap .top-nav .top-nav-right{

  float: right;


}

/*利用ul中的li的浮动，使竖直的li水平分布。*/
.wrapper  .top-nav-wrap .top-nav ul li{

 float: left;
 
 margin-right: 7px;

}


/*文字处理：文字都在a标签和span标签中。*/

.wrapper  .top-nav-wrap .top-nav  a{

  color: #6c6c6c;

  font-size:12px; 

 /*设置文字居中：文字行高(line-height)
 等于父容器的高度(height)*/

 line-height: 35px;

 padding: 0 6px;

}

.wrapper  .top-nav-wrap .top-nav  a:hover{


  color: #f40;  


}


.wrapper  .top-nav-wrap .top-nav .top-nav-left .china .c-span{

  color: #3c3c3c;

  font-size: 13px;

        /*设置文字居中：文字行高(line-height)
        等于父容器的高度(height)*/
        line-height: 35px;
      }



      /*这里设置全部图标的大小，和容器的大小和display*/

      .wrapper  .top-nav-wrap .top-nav .bg-pic{

       /*因为display:inline-block;中有vertical-align:button;
       所以要想中间对齐，就设置vertical-align: middle;*/
       display:inline-block;
       vertical-align: middle;
       width:6px;
       height:3px; 
       
       background-size: 100% 100%;

     }


     /*添加小三角图标*/
     .wrapper  .top-nav-wrap .top-nav .bg-pic.xsj-pic{

       background-image:url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/xsj.png');


     }



     /*这里是设置购物车图标*/
     .wrapper  .top-nav-wrap .top-nav .bg-pic.shopCar-pic{

      background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/gwc.png');

      width: 12px;

      height: 12px;
    }



    /*这里是设置收藏夹图标*/
    .wrapper  .top-nav-wrap .top-nav .bg-pic.like-pic{


      background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/star.png');

      width: 12px;

      height: 12px;

    }


    /*这里是设置网络导航图标*/
    .wrapper  .top-nav-wrap .top-nav .bg-pic.web-nav-pic{

      background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/dh.png');

      height: 9px;

      width: 7px;
    }

    /*这里是设置商品分类和卖家中心之间的那个竖线的。*/
    .wrapper  .top-nav-wrap .top-nav  .top-nav-menu.cut-off{

     line-height: 35px;

     color:#ddd;

   }


   /*这里是设置："亲，请登录"的字体颜色*/

   .wrapper  .top-nav-wrap .top-nav .login{

     color:#f40;  

   }


   .wrapper  .top-nav-wrap .top-nav .c-span{

     padding: 0 5px;

   }




   /*这里本来是设置广告图片部分，但是没有素材，所以算了。*/

/*.wrapper .top-nav-wrap .ad-wrap {

   height: 70px;

   width: 100%;

}

.wrapper .top-nav-wrap .ad-wrap img{

       height: 70px;

       width: 100%;


}
*/




/*动态logo部分+搜索区+二维码部分*/

/*这是外面的容器区*/
.wrapper  .search-wrap{

 width: 100%;
 height: 97px;
 padding-top: 24px;
 /*border: 1px solid black;*/

 background-color:#fff;


 
}

/*这是中间的内容区*/
.wrapper  .search-wrap .search-con{


 width:1190px;

 height:88px;

 margin:0 auto;

 /*border:1px solid green;*/


}


/*动态图部分*/
.wrapper  .search-wrap .search-con .logo-box{

  display:inline-block;

  width: 190px;

  height: 105px;

  /*border: 1px solid #f40;*/

  background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/logo.gif');

  background-size: 100% 100%;


   /*position(定位)  relative:相对于自身进行定位。
   absolute:相对于离自己最近的父级，并且是有定位的父级进行定位。就是
   这个父级要有position属性。 
   */
   position: relative;

   top: -11px;



 }


 /*搜索区域部分*/
 .wrapper  .search-wrap .search-con .search-box{

  display:inline-block;

  width:627px;

  /*向右侧偏移50px;*/
  margin-left: 50px;

  height:87px;

  /*border: 1px solid #f40;*/

  /*基于上基准线对齐。*/
  vertical-align: top;
}


.wrapper  .search-wrap .search-con .search-box .search-top{

 width: 627px;

 height: 62px;

 /*border: 1px solid black;*/
}


/*这是包裹着上边三个选项(宝贝，天猫，店铺)的容器*/
.wrapper  .search-wrap .search-con .search-box .search-top .search-tab{

    /*因为ul,li设置了浮动，所以自己设置了高度用来撑开
      下面的部分，防止它们跑上来。
      */
      height: 22px;

      margin-left: 17px;

    }

    /*具体设置着三个选项(宝贝，天猫，店铺)的样式。*/
    .wrapper  .search-wrap .search-con .search-box .search-top .search-tab ul li{

      float:left;

      width: 36px;

      color: #f40;
      font-size: 12px;

      /*这是设置竖直方向的居中。*/
      height: 22px;
      line-height: 22px;

      /*设置水平方向的居中。*/
      text-align: center;


     /*让每个li之间的距离大一点，特别是之后要设置hover之后，有背景
     不能让它们连在一起,而当你没有设置margin-right的话
     它们会连在一起，你可以试试。*/
     margin-right: 4px;

     /*border-radius:设置圆角。*/
     border-top-right-radius:5px ;
     border-top-left-radius:5px ;


     /*鼠标覆盖时有小手效果。*/
     cursor: pointer;

     
   }

   .wrapper  .search-wrap .search-con .search-box .search-top .search-tab ul li:hover{

    background-color: #FFEEE5;



  }

  /*这里是设置li开头那个具有特殊样式的*/
  .wrapper  .search-wrap .search-con .search-box .search-top .search-tab ul li.select{

   color: #fff;
   font-weight: 700;

         /*背景颜色渐变：linear-gradient(线性渐变)
         to right：是从左到右的意思。
         */
         background:linear-gradient(to right,#ff9000 0,#ff5000 100%);

       }

       /*搜索框部分的父级 */
       .wrapper  .search-wrap .search-con .search-box .search-top .search-panel{

         width: 627px;

         height: 40px;

         /*border: 1px solid black;*/

         /*给后面的要定位的元素作一个参照物。*/
         position: relative;


       }

       .wrapper  .search-wrap .search-con .search-box .search-panel form{



       }

       /*这是搜索按钮的容器。 */
       .wrapper  .search-wrap .search-con .search-box .search-panel form .btn{

        width: 74px;

        height:40px;

        /*border: 1px solid black;*/


   /*position(定位)  relative:相对于自身进行定位。
   absolute:相对于离自己最近的父级，并且是有定位的父级进行定位。就是
   这个父级要有position属性。 
   */
   position: absolute; 
   top: 0px;
   right: 0px;


   /*border-radius:设置圆角。*/
   border-top-right-radius:20px ;
   border-bottom-right-radius:20px ;


     /*超出部分隐藏，因为下面的.submit设置百分百，会使按钮的背景颜色区域
     变成正方形*/
     overflow: hidden;



   }



   /*具体实现搜索按钮的样式。*/
   .wrapper  .search-wrap .search-con .search-box .search-panel form .btn .submit{

    /*这里是相对于父级也就是搜索按钮的容器.btn百分百。*/
    width: 100%;
    height: 100%;
    color: #fff;
    background:linear-gradient(to right,#ff9000 0,#ff5000 100%); 

    /*button有一个默认的边框，这里把它给去掉。*/
    border: none;

    /*设置文本的粗细*/
    font-weight: 700;

    /*设置字体大小*/
    font-size: 18px;

    /*cursor:设置光标样式。*/
    cursor: pointer;
  }


  /*这应该是包裹这输入框和照相机图标的容器*/
  .wrapper  .search-wrap .search-con .search-box .search-panel .search-input-box{

    width: 551px;

    height: 36px;

    /*border: 1px solid red;*/

    border: 2px solid #ff5000;

    border-top-left-radius:20px;

    border-bottom-left-radius:20px;

    overflow: hidden;
  }


  /*这是搜索的输入框的容器*/
  .wrapper  .search-wrap .search-con .search-box .search-panel .search-input{


   height:36px;
   width:472px;

   /*使下面输入框超出部分隐藏。*/
   overflow: hidden;

 }


 .wrapper  .search-wrap .search-con .search-box .search-panel .search-input input{

  width:472px;

  height:24px;


  padding:16px 16px ;
  /*把输入框自带的边框消除。*/
  border:none;

  /*取消点击时出现在输入框周围的轮廓线*/
  outline: 0;

  /*文字缩进用于放置放大镜图标*/
  text-indent: 10px;
}


/*先设置两个图标（a标签）共有的属性。*/
.wrapper  .search-wrap .search-con .search-box .search-panel .suosuo,
.wrapper  .search-wrap .search-con .search-box .search-panel .camera{

 display: inline-block;

 position: absolute;

}



/*再在这里设置独有的属性样式。*/
.wrapper  .search-wrap .search-con .search-box .search-panel .suosuo{

 width: 12px;

 height: 14px;

         /*因为这两个a标签的定位属性值是:absolute;所以
         相对于它上一个有定位的父级进行定位。*/
         top: 12px;
         left: 14px;

         background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/fdj.png');
         
         /*这个是相对于自身容器的百分之一百。*/
         background-size: 100% 100%;
       }

       .wrapper  .search-wrap .search-con .search-box .search-panel .camera{

        width: 20px;

        height: 22px;

         /*因为这两个a标签的定位属性值是:absolute;所以
         相对于它上一个有定位的父级进行定位。*/
         top: 11px;
         right:90px;

         background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/camera.png');

         background-size: 100% 100%;
       }


       .wrapper  .search-wrap .search-con .search-box .search-bl{

        width:627;

        height: 20px;
        line-height: 20px;

        /*border: 1px solid red;*/

        font-size: 12px;
        color: black;
        margin-right: 8px;


      }

      .wrapper  .search-wrap .search-con .search-box .search-bl a:hover{


       color: #f40;

     }

     /*给三个具有独特颜色的a标签设置颜色。*/
     .wrapper  .search-wrap .search-con .search-box .search-bl .a-select{

      color: #f40;

    }





    /*二维码部分的容器*/
    .wrapper  .search-wrap .search-con .code-box{

     display:inline-block;

     width: 76px;

     height: 90px;

     /*设置元素在元素框内的垂直对齐方式。*/
     vertical-align: top;

     border: 1px solid #eee;

     margin-left: 120px;



     /*下面的“x”会用到定位，所以在这里设置一个参考物*/
     position: relative;
   }



   /*文字部分*/
   .wrapper  .search-wrap .search-con .code-box .phone{

     color: #ff5000;
     font-size: 14px;
     line-height: 20px;

     margin-left: 7px;

   }


   /*二维码图片部分*/
   .wrapper  .search-wrap .search-con .code-box .code{

    width: 62px;

    height: 62px;

    display:inline-block;

    background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/ewm.png'); 

    background-repeat:no-repeat;

    background-size: 100% 100%;

    margin-left: 7px;

    
  }



  .wrapper  .search-wrap .search-con .code-box .close{

    position: absolute;

    top: 0px;

    left: -18px;

    display: inline-block;

    /*border: 1px solid #eee;*/

    color: #ddd;
    font-size: 14px;
    /*水平居中*/
    text-align: center;

    width: 16px;

    /*竖直居中*/
    height: 16px;
    line-height: 16px;

  }































  /*中间部分的导航条 */
  .wrapper .screen-nav{

    width: 1190px;
    height: 30px;

    /*设置居中。*/
    margin:0 auto;


    background:linear-gradient(to right,#ff9000 0,#ff5000 100%); 
  }



  .wrapper .screen-nav .screen-nav-content{


    width: 100%;

    /*这里的百分百是相对于父容器(screen-nav)，所以是30px。*/
    height: 100%;


  }



  /*如果h2不设置浮动，那么它就不会和ul,li在同一行。*/

  .wrapper .screen-nav .screen-nav-content h2{

    float: left;

    font-size: 16px;
    width: 190px;

    /*这里的百分百是相对于父容器(screen-nav-content),所以是30px。*/
    /*竖直居中*/
    height: 100%;
    line-height: 30px;
    /*水平居中*/
    text-align: center;


    /*在背景颜色上它自己又拥有颜色，所以把背景颜色覆盖掉了*/
    background-color: #ff5000;
    color: #fff;

  }


  .wrapper .screen-nav .screen-nav-content ul{

    float: left;




  }

  .wrapper .screen-nav .screen-nav-content ul li{

    float: left;

    margin: 0 3px;
    padding: 0 4px;


    /*给下面的定位作一个参考*/
    position: relative;

  }

  .wrapper .screen-nav .screen-nav-content ul li.xhx{

   line-height: 30px;

   color: #fff;

 }

 .wrapper .screen-nav .screen-nav-content ul li a{

   line-height: 30px;

   color: #fff;

   font-weight: 700;




 }

 /*:hover是伪类，::before是伪元素。*/


 /*这个是当你li:hover之后要做什么*/
 .wrapper .screen-nav .screen-nav-content ul li a:hover::before{

  /*设置当前伪元素的内容，要写这个属性，伪元素才会起作用*/
  content: "";

   /* 这里不设置为块级元素也可以，这里设置应该是为清除浮动做准备，
   因为用伪元素清除浮动，要设置为块级元素才行。*/
   display: block;

   width: 30px;
   height: 30px;
   position: absolute;
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/up.png');
   background-repeat: no-repeat;
   background-size: center;

   top: -10px;

   /*左顶点居中，并不是中心居中,所以下面两行语句一起设置才会中心居中*/
   left: 50%;
   margin-left: -15px;


 }






 /*屏幕主体展示部分总容器*/
 .wrapper .screen-box{

   width: 1186px;
   height: 632px;
   margin:0 auto;

   /*border: 2px solid #f40;*/
 }


 /*左边部分*/
 .wrapper .screen-box .main{

  width:890px;
  height:632px;
  /*border: 1px solid black;*/


    /*因为div是块级元素，要让.main和.col-right在同一行，所以这里
    使用浮动*/
    float: left;

  }


  /*左边部分的上部分*/
  .wrapper .screen-box .main .main-inner{



    width:890px;
    height:522px;
    /*border: 1px solid black;*/


    position: relative;


  }

  /*左边部分的上部分的左部分(listview部分)*/
  .wrapper .screen-box .main .main-inner .inner-left{


    /*宽度与上面用来显示“主题市场”的h2标签的宽度一样。*/
    width: 190px;
    height: 522px;
    border: 1px solid #f40;

    /*取消上边框*/
    border-top: none;

    /*使用浮动让它上去*/
    float: left;

    background-color: #fff;


    /*因为下面的li设置的背景会溢出，所以在它的容器设置超出部分隐藏*/
    overflow: hidden;



  }


.wrapper .screen-box .main .main-inner .inner-left ul li{


    /*竖直居中*/
    height: 32px;
    line-height: 32px;

    width: 190px;
 


    padding-left: 20px;
    padding-right: 19px;


   position:relative;

}


.wrapper .screen-box .main .main-inner .inner-left ul li a{

     color:#666;

     font-size:14px ;

     font-weight: 400;


}


.wrapper .screen-box .main .main-inner .inner-left ul li:hover{


        background-color: #ffe4dc;
       
       color: #f40;


}



.wrapper .screen-box .main .main-inner .inner-left ul li:hover a{


       color: #f40;

}





.wrapper .screen-box .main .main-inner .inner-left ul li a:hover{


        text-decoration: underline;

        /*color: #f40;*/

}




/*三角形图标*/
  .wrapper .screen-box .main .main-inner .inner-left ul li span{


    /*span不能设置宽高，所以这里设置display:inline-block;
      使其可以设置宽高。
    */

     display: inline-block;
     width: 5px;
     height: 8px;
     /*border: 1px solid black;*/
    
      background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/yjt.png');
  
      background-repeat: no-repeat;



     /*这里给其设置定位:这里是相对于li进行定位，所以在
     上面的li中设置定位，让其给三角图标当定位参考。
     。*/
     position: absolute;

     right:50px;


     top: 13px;
     
    
  }

 /*左边部分的上部分的中间部分*/
  .wrapper .screen-box .main .main-inner .inner-center{


     /*使用浮动让它上去*/
   float:left;

   width: 520px;
   height: 522px;
   /*border-right: 1px solid #f40;*/

 

 }

.wrapper .screen-box .main .main-inner .inner-center .pic-box {

    padding:8px;


}


.wrapper .screen-box .main .main-inner .inner-center .inner-mall{

      padding: 0 8px;

width: 520px;

height: 230px;
      position: relative;

}


.wrapper .screen-box .main .main-inner .inner-center .inner-mall .tm{

     font-size: 12px;

     color: #666;
 
     position: absolute;

     top: 7px;


}


.wrapper .screen-box .main .main-inner  .inner-right .top{

      position: absolute;




    /*这里可能是因为css代码的问题，导致a标签没有用
      我用z-index属性把这个div层放到最上面就解决了*/
      z-index: 1;

      left: 725px;

      padding-top:8px;

}



.wrapper .screen-box .main .main-inner  .inner-right .buttom{

      position: absolute;


      left: 725px;

      padding-top:300px ;

}

.wrapper .screen-box .main .main-inner  .inner-right .buttom .hot{

     color: #666;
     font-size: 14px;


}


 /*左边部分的下部分*/
 .wrapper .screen-box .main .main-buttom{

  width:884px;
  height:100px;
  /*border: 1px solid red;*/

  margin-top: 5px;

  background-color:#fff;

}


.wrapper .screen-box .main .main-buttom .content{


   background-color:#fff;

   padding-left: 14px 12px;

   margin-top: 10px;

   /*为下面a标签中的内容定位提供一个参考物。*/
   position: relative;


}



.wrapper .screen-box .main .main-buttom .content .login-box{

        width:180px;
        height:73px;
        background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/tbtt.png');
        background-position: 100% 100%;


}


.wrapper .screen-box .main .main-buttom .content a{

        position: absolute;
        top:5px;
        left: 200px;
}


.wrapper .screen-box .main .main-buttom .content a img{


    /*使文字环绕图片，因为你图片浮动后，它脱离文档流，但是不会脱离文本流。*/
          float: left;

}



.wrapper .screen-box .main .main-buttom .content a h4{

     margin-top:2px;

     margin-left: 120px;

     color:#333;      
     font-size: 16px;

     height: 28px;
     line-height: 28px;

}


.wrapper .screen-box .main .main-buttom .content a h4:hover{

    color: #ff5000;

}




.wrapper .screen-box .main .main-buttom .content a p{

    margin-left: 120px;

    color:#999;

    /*一行高度有18px，而字体大小是14px，所以每行字体之间有间隔。*/
    line-height: 18px; 
    font-size: 14px;
    height:36px;
    overflow: hidden;

}



/*总体的右边部分*/
.wrapper .screen-box .col-right{


  width: 290px;
  height: 632px;
  /*border:1px solid black;*/

   /*因为div是块级元素，要让.main和.col-right在同一行，所以这里
   使用浮动*/
   float: left;


 }

/*<!-- 会员登录部分 -->*/
 .wrapper .screen-box .col-right .memeber{

     width: 290px;
     height: 132px;

     /*border: 1px solid black;*/

     background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/bg.png');
     
     background-size: 100% 100%;

     margin-top: 10px;
 }


/*头像部分和“领淘金币抵钱”和“会员俱乐部”部分的容器*/
 .wrapper .screen-box .col-right .memeber .memeber-header{

      width:290px;
      height:91px;

       /*background: red;*/

 }



/*头像部分*/
 .wrapper .screen-box .col-right .memeber  .memeber-header .header{

    width: 290px;
    height: 56px;
    /*border-bottom: 1px solid black;*/


   /*使下面的圆形居中*/
    text-align: center;

 }

 

  .wrapper .screen-box .col-right .memeber  .memeber-header .header a{

     display: inline-block;

     width: 50px;
     height: 50px;

     /*使其变成一个圆形*/
     border-radius: 50%;
     
     background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/tx.jpg');
     margin-top: 5px;  

     /*border: 1px solid black;*/


  }

 .wrapper .screen-box .col-right .memeber .memeber-header .info{

      display: inline-block;
       width: 290px;
       height: 17px;
       line-height: 17px;
       color: #3c3c3c;
       font-size: 14px;
       

      text-align: center;

 }


.wrapper .screen-box .col-right .memeber .memeber-header p{

      width: 290px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      


}

.wrapper .screen-box .col-right .memeber .memeber-header p a{

    display: inline-block;

    font-size: 12px;
    width: 72px;
    height: 17px;
    border-radius: 9px;
    background-color: #ffe4db;

    color: #ff5000;

    padding:0 8px 0 20px;

    position: relative;

    
}


.wrapper .screen-box .col-right .memeber .memeber-header p a span{


    position:absolute;

    display: inline-block;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    /*border: 1px solid black; */

   
    /*先在这里引入图片，然后在下面再通过定位来显示不同的图片*/
    background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/pics.png');
 

}


.wrapper .screen-box .col-right .memeber .memeber-header p .icon span{

   /*雪碧图，通过定位来显示不同的图片*/
   background-position:0 -572.5px;


}

.wrapper .screen-box .col-right .memeber .memeber-header p .club span{

/*通过定位来显示不同的图片*/
   background-position:0 -528px;

}



.wrapper .screen-box .col-right .memeber .memeber-font{

        width: 290px;
        height: 40px;
        text-align: center;
        padding-top: 10px;
        /*border: 1px solid black;*/


}



.wrapper .screen-box .col-right .memeber .memeber-font a{

    display: inline-block;
    width:75px;
    height:25px;
    line-height: 25px;
    border-radius: 3px;
    background:linear-gradient(to right,#ff9000 0,#ff5000 100%); 
    color: #fff;
    font-size: 14px;
    font-weight: 700;


}


/*单独给第一个“登录”设置宽度*/
.wrapper .screen-box .col-right .memeber .memeber-font a.login{

       
   width: 92px;

}


 /*信息举报部分区域 */
.wrapper .screen-box .col-right .message{

     width: 290px;
     height: 26px;
    /*border:1px solid black;*/
    
}



.wrapper .screen-box .col-right .message a{


     display: inline-block;
     width: 290px;
     height: 26px;
     line-height: 26px;
     text-align: center;
     background-color:#ffe4db;
    color: #f40;
    font-size: 12px;


     position: relative;

}




/*右三角以span标签背景图片的形式展示出来*/
.wrapper .screen-box .col-right .message a span{


 display: inline-block;
 width: 10px;
 height: 10px;
 position: absolute;
 top:9px;
 right: 52px;
background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/ysj.png');
 background-repeat: no-repeat;

}



/*<!-- 公告区域 */
.wrapper .screen-box .col-right .notice{

    height: 98px;
    width: 100%;
    padding-top:10px;
    /*border:1px solid black;*/


    background-color: #fff;


}


.wrapper .screen-box .col-right .notice li{

      float: left;

}


.wrapper .screen-box .col-right .notice .title{

     height: 30px;
     width: 100%;

     
     /*border:1px solid red;*/

     text-align: center;


     /*因为宽度已经设置了百分之一百，但是又设置了padding属性
     所以border线就超到外面去了*/
     padding:0 8px;

      
      /*把当前标准模式下的盒模型，转换为IE模式下的盒模型，解决
      上面的问题*/
     box-sizing:border-box;

}



.wrapper .screen-box .col-right .notice .title li{

       width: 32px;
       height: 20px;
       margin: 0 11px;
  
      效果是在li中的元素是
      text-align:center;
}


.wrapper .screen-box .col-right .notice .title li a{

      color:#3c3c3c;
      font-size:13px;
      line-height: 20px;

     /*加一个padding,使里面的内容宽一些
       我们在下面设置的border-bottom: 2px solid #f40;
       也能长一点，不然原来下面的线是和文字一样长。
     */
      padding: 0 2px;




}


.wrapper .screen-box .col-right .notice .title li a:hover{

       color: #f40;
    

}


.wrapper .screen-box .col-right .notice .title li a.active{

      font-weight: 700;

      border-bottom: 2px solid #f40;


}


.wrapper .screen-box .col-right .notice .content{


          width: 100%;
          height: 50px;


    /*因为宽度已经设置了百分之一百，但是又设置了padding属性
     所以border线就超到外面去了*/
          padding:9px;
          /*border-bottom: 1px solid black;*/


      /*把当前标准模式下的盒模型，转换为IE模式下的盒模型，解决
      上面的问题*/
     box-sizing:border-box;


}


/*设置每个文字块的宽度和高度*/
.wrapper .screen-box .col-right .notice .content li{
        
        width: 130px;
 
        height: 25px;

        line-height: 25px;

        text-align: center;

        margin-bottom: 10px;

        box-sizing:border-box;

}



.wrapper .screen-box .col-right .notice .content li a{
      
      font-size: 12px;
      color: #3c3c3c;

      

}


/*<!-- 默认选中状态：文字是橙红色的 -->*/
.wrapper .screen-box .col-right .notice .content li a.active{

      color: #ff5000;


}


.wrapper .screen-box .col-right .notice .content li a:hover{

      color: #ff5000;


}



.wrapper .screen-box .col-right .module{


    width: 100%;
    height: 230px;
    /*border: 1px solid red; */


    background-color: #fff;



}


.wrapper .screen-box .col-right .module ul li{

     float: left;

     /*设置宽高，这样当我们的内容区域超出，那么它就会自动
     到下一行。*/
     width: 72px;
     height: 77px;


     border:1px solid #f4f4f4;
     border-right: none;

     box-sizing:border-box;
}


.wrapper .screen-box .col-right .module ul li:hover{

    
    
    border: 1px solid #f40;
}


/*边框改变之后，改变字体颜色*/
.wrapper .screen-box .col-right .module ul li:hover a p{

   color:#f40;


}


.wrapper .screen-box .col-right .module ul li a{

     /*因为要设置图片*/
     display: block;
  

     /*设置a里面的p标签的文字居中*/
     text-align: center;

}



/*图片*/
.wrapper .screen-box .col-right .module ul li a span{


    /*为什么设置inline-block呢：因为这样即能设置宽高，
  又能设置：text-align:center;使居中， 具有inline的元素都有
  这样的文本特性
  */
     display: inline-block;


     /*设置宽度，高度把文本给挤下去。*/
     width: 24px;
     height: 24px;


     /*border: 1px solid black;*/

     

     /*现在引入的是总体的一张雪碧图，下面再通过
     background-position,来具体显示需要的图片*/

     background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/pics.png');


    margin-top: 10px;
}



/*下面用background-positon:;来背景定位*/

.wrapper .screen-box .col-right .module ul li a span.icon1{

   
     background-position: 0 0;

}


.wrapper .screen-box .col-right .module ul li a span.icon2{

  /*这两个值是用来调节位置的，第一个是x轴调节左右
  第二个是y轴调节上下*/
  
   background-position: 0 -88px;


}



.wrapper .screen-box .col-right .module ul li a span.icon3{

   
  background-position: 0 -44px;

}



.wrapper .screen-box .col-right .module ul li a span.icon4{

   
  background-position: 0 -132px;

}



.wrapper .screen-box .col-right .module ul li a span.icon5{

   background-position: 0 -176px;


}



.wrapper .screen-box .col-right .module ul li a span.icon6{

   background-position: 0 -220px;


}

.wrapper .screen-box .col-right .module ul li a span.icon7{

   
background-position: 0 -264px;

}


.wrapper .screen-box .col-right .module ul li a span.icon8{

   background-position: 0 -308px;


}

.wrapper .screen-box .col-right .module ul li a span.icon9{

   
background-position: 0 -352px;

}

.wrapper .screen-box .col-right .module ul li a span.icon10{

   background-position: 0 -396px;


}

.wrapper .screen-box .col-right .module ul li a span.icon11{

   
background-position: 0 -440px;

}

.wrapper .screen-box .col-right .module ul li a span.icon12{

   
background-position: 0 -484px;

}



/*设置文字的样式*/
.wrapper .screen-box .col-right .module ul li a p{

   color:#333;

   font-size: 12px;

   margin-top: 10px;
}




/*<!-- app区域 -->*/
.wrapper .screen-box .col-right .app{


     width: 290px;

     height: 125px;

     background-color: #fff;


}

.wrapper .screen-box .col-right .app  .app-top span a.gengduo{

    display: inline-block;

     margin-left: 30px;
    
     font-size: 12px;
}


.wrapper .screen-box .col-right .app .app-top span{

     padding-top:150px;
     margin-left:15px;
 
     color: black;

     font-weight: 700px;
}



.wrapper .screen-box .col-right .app .app-buttom ul li{

     width: 32px;
     height: 32px;
     /*border: 1px solid black;*/
    float: left;

    margin-left: 20px;

    margin-top: 10px;

}



.wrapper .screen-box .col-right .app .app-buttom ul li a  span{

     width: 32px;
     height: 32px;

   display: inline-block;
}


.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao1{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo1.png');

   
}



.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao2{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo2.png');

   }


   .wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao3{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo3.png');

   
}


.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao4{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo4.png');

   
}



.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao5{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo5.png');

   
}


.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao6{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo6.png');

   
}


.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao7{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo7.png');

   
}

.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao8{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo8.png');

   
}


.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao9{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo9.png');

   
}


.wrapper .screen-box .col-right .app .app-buttom ul li a  span.tubiao10{

  

    background-size: 100% 100%;
    
   background-image: url('C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/smalllogo10.png');

   
}